<template>
  <view class="content" :data-theme="currentTheme">
    <view class="text-area">
      <text class="title">{{ $t('global.title') }}</text>
    </view>
    <view>
      <text > 主题色: {{ currentTheme }} </text>
    </view>

    <view>
      <uni-data-select v-model="defaultTheme" :localdata="themeList" @change="changeTheme" ></uni-data-select>
    </view>

    <view
      v-for="(item, index) in locales"
      :key="index"
      class="locale-item"
      @click="handleLocaleChange(item)"
    >
      <text class="text">{{ item.text }}</text>
    </view>

    <view>
      <button type="primary" @click="handleAlert">提示</button>
    </view>
    <view>
      <button type="warn" @click="handleNavigateToB">B包</button>

      <uni-icons
        custom-prefix="iconfont"
        type="icon-home"
        size="30"
      ></uni-icons>
      <uni-icons type="contact" size="30"></uni-icons>
    </view>
    <view>
      <button type="primary" @click="handleSetStorage">设置Storage</button>
    </view>
    <view>
      <button type="primary" @click="handleGetStorage">获取Storage</button>
    </view>
    <view>
      <button type="primary" @click="handleLogin">登录</button>
    </view>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        cancel-text="关闭"
        confirm-text="同意"
        title="通知"
        content="欢迎使用 uni-popup!"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { onShow } from '@dcloudio/uni-app'
  import StorageConst from '../../utils/storage-const'
  import useModuleAStore from '../../store/module-a'
  import authorizationService from '../../services/authorization-service'

  // 主题相关逻辑
  import { useCommonThemeEffect } from '../../effects/themeEffects'
  const { themeList, changeTheme, currentTheme } = useCommonThemeEffect()
  const defaultTheme = ref('shiji')

  const alertDialog = ref<any>(null)
  const moduleAStore = useModuleAStore()
  const i18n = useI18n()
  const locales = reactive([
    {
      text: '系统',
      code: 'auto'
    },
    {
      text: '英文',
      code: 'en'
    },
    {
      text: '简体',
      code: 'zh-Hans'
    },
    {
      text: '繁体',
      code: 'zh-Hant'
    }
  ])
  console.log(moduleAStore.name)
  function handleLocaleChange(e: any) {
    uni.setLocale(e.code) //
    i18n.locale.value = e.code

    uni.setNavigationBarTitle({
      title: i18n.t('moduleA.title')
    })
  }

  function handleAlert() {
    alertDialog.value.open()
  }

  function dialogConfirm() {
    uni.showToast({
      title: 'confimr'
    })
  }

  function dialogClose() {
    uni.showToast({
      title: 'close'
    })
  }

  function handleNavigateToB() {
    uni.navigateTo({
      url: '/sub_packages/a_package/pages/sample/index'
    })
  }

  function handleSetStorage() {
    uni.setStorageSync(StorageConst.ACCESS_TOKEN, 'xxxxxxx')
  }

  function handleGetStorage() {
    const xx = uni.getStorageSync(StorageConst.ACCESS_TOKEN)
    console.error(xx)
  }

  async function handleLogin() {
    uni.showLoading({})
    const response = await authorizationService.login({
      userName: 'admin',
      password: 'admin'
    })
    uni.hideLoading()
    console.log(response)
  }

  onShow(() => {
    uni.setTabBarItem({
      index: 0,
      text: i18n.t('moduleA.title')
    })
    uni.setNavigationBarTitle({
      title: i18n.t('moduleA.title')
    })
  })
</script>

<style lang="scss">
  @import '../../scss/data-theme';

  .content {
    height: 100%  !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .locale-item {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
  }

  .locale-item .text {
    flex: 1;
  }

  .icon-check {
    margin-right: 5px;
    border: 2px solid #007aff;
    border-left: 0;
    border-top: 0;
    height: 12px;
    width: 6px;
    transform-origin: center;
    /* #ifndef APP-NVUE */
    transition: all 0.3s;
    /* #endif */
    transform: rotate(45deg);
  }

  .example-body {
    background-color: #fff;
    padding: 10px 0;
  }

  .button {
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
  }

  .popup-success {
    color: #fff;
    background-color: #e1f3d8;
  }

  .popup-warn {
    color: #fff;
    background-color: #faecd8;
  }

  .popup-error {
    color: #fff;
    background-color: #fde2e2;
  }

  .popup-info {
    color: #fff;
    background-color: #f2f6fc;
  }
</style>
